<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>msg:{{ msg }}</p>
        <!-- <input type="button" :value="lang[local].loginBtn"> -->
        <input type="button" :value="$lang[local].loginBtn">
        <input type="button" value="中|英" @click=" local = local=='cn'?'en':'cn' ">
        <input type="button" value="打印全局属性" @click="printGlobalLang()">
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"

        const app = createApp({
            data() {
                return {
                    msg: "msg",
                    local: "cn",
                    // lang: {
                    //     cn: {
                    //         loginBtn: "登录"
                    //     },
                    //     en: {
                    //         loginBtn: "login"
                    //     }
                    // }
                }
            },
            methods: {
                printGlobalLang() {
                    console.log(this)
                    console.log(this.$lang)

                }
            },
        })
        // 环境修改
        // app.config.warnHandler = function(msg,ins,trace){
        //     console.log(msg);
        //     console.log(ins);
        //     console.log(trace);
        //     console.warn("vue运行错误");
        // }

        // 定义全局属性 - 全局属性在任意vue的模板中或者实例中都可以直接调用
        app.config.globalProperties.$lang = {
            cn: {
                loginBtn: "登录"
            },
            en: {
                loginBtn: "login"
            }
        }

        app.mount("#app")
    </script>
</body>

</html>